import './index.css'
import { Menu, Dropdown, Button, message, Space, Input, Table } from 'antd';
import { DownOutlined, PlusOutlined, ReloadOutlined, } from '@ant-design/icons';

// 多级菜单
function handleMenuClick(e: any) {
    message.info('Click on menu item.');
    console.log('click', e);
}
// 表格
const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record: any, selected: any, selectedRows: any) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const AllArticles = () => {
    const state = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key="1">
                已发布
            </Menu.Item>
            <Menu.Item key="2">
                草稿
            </Menu.Item>
        </Menu>
    );
    const classify = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key="1">
                前端
            </Menu.Item>
            <Menu.Item key="2">
                后端
            </Menu.Item>
            <Menu.Item key="3">
                阅读
            </Menu.Item>
            <Menu.Item key="4">
                Linux
            </Menu.Item>
            <Menu.Item key="5">
                LeetCode
            </Menu.Item>
            <Menu.Item key="6">
                要闻
            </Menu.Item>
        </Menu>
    );
    const data = [];
    const columns: any = [
        {
            title: '标题',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: '状态',
            dataIndex: 'address',
            key: '1',
            width: 150,
        },
        {
            title: '分类',
            dataIndex: 'address',
            key: '2',
            width: 150,
        },
        {
            title: '标签',
            dataIndex: 'address',
            key: '3',
            width: 150,
        },
        {
            title: '阅读量',
            dataIndex: 'address',
            key: '4',
            width: 150,
        },
        {
            title: '喜欢数',
            dataIndex: 'address',
            key: '5',
            width: 150,
        },
        {
            title: '发布时间',
            dataIndex: 'address',
            key: '6',
            width: 150,
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            render: () => <p><a>编辑</a>&nbsp;|&nbsp;<a>首焦推荐</a>&nbsp;|&nbsp;<a>查看访问</a>&nbsp;|&nbsp;<a>删除</a></p>,
        },
    ];
    for (let i = 0; i < 100; i++) {
        data.push({
            key: i,
            name: `Edrward ${i}`,
            address: `London Park no. ${i}`,
        });
    }
    return (
        <div>
            所有文章
            <div className="top">
                <div className="inp">
                    <div>
                        <p> 标题：</p>
                        <Input placeholder="请输入文章标题" />
                    </div>
                    <div>
                        <p>状态：</p>
                        <Space wrap>
                            <Dropdown overlay={state} trigger={['click']}>
                                <Button>
                                    &nbsp; &nbsp;  &nbsp;<DownOutlined />
                                </Button>
                            </Dropdown>
                        </Space>
                    </div>
                    <div>
                        <p>分类:</p>
                        <Space wrap>
                            <Dropdown overlay={classify} trigger={['click']}>
                                <Button>
                                    &nbsp; &nbsp;  &nbsp;<DownOutlined />
                                </Button>
                            </Dropdown>
                        </Space>
                    </div>
                </div>
                <div className="button">
                    <Button type="primary">搜索</Button>
                    <Button> 重置</Button>
                </div>
            </div>
            <div className="bottom">
                <div className="button">
                    <Button type="primary"><PlusOutlined />搜索</Button>
                    <Button type="text"><ReloadOutlined /></Button>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={data} scroll={{ x: 1500, y: 500 }} />,
            </div>
        </div>
    )
}
export default AllArticles